import './static/wangeditor_editor.css'
import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { Spin, message } from 'antd'

/**
 * wangEditoer 组件
 * @param {
 *  style: 样式 对象
 *  onChange: 外部接受变化的函数，funcution(html, textValue)
 * } props 
 * @returns 
 */
function EditorWidget(props) {
    // editor 实例
    const [editor, setEditor] = useState(null)                   // JS 语法

    // 编辑器html内容
    const [html, setHtml] = useState(null)

    //loading
    const [loading, setLoading] = useState(true)

    // 工具栏配置
    const toolbarConfig = {}

    //模拟类组件生命周期的 componentDidMount
    useEffect(() => {
        if (props.defaultHtml) setHtml(props.defaultHtml)
        setLoading(false)
    }, [props])

    // 编辑器配置
    const editorConfig = {                         // JS 语法
        placeholder: '请输入内容...',
        MENU_CONF: {
            uploadImage: {
                // 上传图片的配置
                server: '/file/rickText/image/upload',
                // 服务端接受的名字 ，默认值 'wangeditor-uploaded-image'
                fieldName: 'file',
                // 单个文件的最大体积限制，默认为 2M
                maxFileSize: 10 * 1024 * 1024, // 10M
                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 10,
                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['image/*'],
                // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,
                // 超时时间，默认为 10 秒
                timeout: 10 * 1000, // 10 秒

                headers: {
                    token: localStorage.getItem('token')
                },

                onBeforeUpload(file) { // TS 语法
                    return file
                },
                onProgress(progress) {       // JS 语法
                    // progress 是 0-100 的数字
                    console.log('progress', progress)
                },
                onSuccess(file, res) {          // JS 语法
                    console.log(`${file.name} 上传成功`, res)
                    message.success('上传成功')
                },
                onFailed(file, res) {           // JS 语法
                    console.log(`${file.name} 上传失败`, res)
                    message.error('上传失败')
                },
                onError(file, err, res) {               // JS 语法
                    console.log(`${file.name} 上传出错`, err, res)
                    message.error('出错啦！')
                }
            },
            uploadVideo: {
                server: '/file/rickText/video/upload',
                // form-data fieldName ，默认值 'wangeditor-uploaded-video'
                fieldName: 'videoFile',
                // 单个文件的最大体积限制，默认为 10M
                maxFileSize: 1000 * 1024 * 1024, // 5M
                // 最多可上传几个文件，默认为 5
                maxNumberOfFiles: 3,
                // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['video/*'],
                // 超时时间，默认为 30 秒
                timeout: 180 * 1000, // 180 秒

                headers: {
                    token: localStorage.getItem('token')
                },
                
                onBeforeUpload(file) { // TS 语法
                    return file
                },
                onProgress(progress) {       // JS 语法
                    // progress 是 0-100 的数字
                    console.log('progress', progress)
                },
                onSuccess(file, res) {          // JS 语法
                    console.log(`${file.name} 上传成功`, res)
                    message.success('上传成功')
                },
                onFailed(file, res) {           // JS 语法
                    console.log(`${file.name} 上传失败`, res)
                    message.error('上传失败')
                },
                onError(file, err, res) {               // JS 语法
                    console.log(`${file.name} 上传出错`, err, res)
                    message.error('出错啦！')
                }
            }
        }
    }

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])

    if (loading === true) return <Spin />
    else return (
        <div style={{
            border: '1px solid #ccc',
            zIndex: 100,
            ...props.style,
            display: 'flex',
            flexDirection: 'column'
        }}
        >
            <Toolbar
                editor={editor}
                defaultConfig={toolbarConfig}
                mode="default"
                style={{ borderBottom: '1px solid #ccc' }}
            />
            <Editor
                defaultConfig={editorConfig}
                value={html}
                onCreated={setEditor}
                onChange={async editor => {
                    setHtml(editor.getHtml())
                    if (props.onChange && typeof props.onChange === 'function') {
                        await props.onChange(editor.getHtml(), editor.getText())
                    }
                }}
                mode="default"
                style={{ flex: '1', overflowY: 'hidden' }}
            />
        </div>
    )
}

export default EditorWidget